<template>
  <div class="app-container">
      <div class="filter-container">
        
        <el-select v-model="search.type" clearable placeholder="全部" >
            <el-option 
            v-for="(item,index) in selectOptions.statisType" 
            :key="index"
            :label="item.label"
            :value="item.value">
                <span :class="'select-custom '+getClassName(item.value)">{{ item.label }}</span>
            </el-option>
        </el-select>
        
        <el-date-picker v-model="search.month" type="month"  placeholder="选择月" style="margin-left:10px;"></el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>

    <div class="content">
        <el-table v-loading="listLoading" :data="list" 
            border fit highlight-current-row stripe 
            style="width: 100%">
            <el-table-column align="center" label="序" width="80">
                <template slot-scope="scope">
                <span>{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="销售顾问">
                <template slot-scope="scope">
                <span>{{ scope.row.guider }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="所在部门">
                <template slot-scope="scope">
                <span>{{ scope.row.departname }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="上牌率">
                <template slot-scope="scope">
                <span :title="scope.row.register+'/'+scope.row.registertarget">{{ scope.row.registerpercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="留档率">
                <template slot-scope="scope">
                <span :title="scope.row.keep+'/'+scope.row.keeptarget">{{ scope.row.keeppercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="精品率">
                <template slot-scope="scope">
                <span :title="scope.row.boutique+'/'+scope.row.boutiquetarget">{{ scope.row.boutiquepercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="投保率">
                <template slot-scope="scope">
                <span :title="scope.row.insurance+'/'+scope.row.insurancetarget">{{ scope.row.insurancepercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="成交率">
                <template slot-scope="scope">
                <span :title="scope.row.order+'/'+scope.row.ordertarget">{{ scope.row.orderpercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="按揭率">
                <template slot-scope="scope">
                <span :title="scope.row.loan+'/'+scope.row.loantarget">{{ scope.row.loanpercent }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="月份">
                <template slot-scope="scope">
                <span>{{ scope.row.month |parseTime('{y}-{m}') }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="chart" id="receptionChart" style="width:100%;height:400px;"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as analyzeApi from '@/api/presale/analyze'
import {parseTime} from '@/utils/index';

export default {
    data(){
        return {
            list:null,
            listLoading:false,
            search:{
                type:'0|0',
                month:''
            },
            selectOptions:{
                statisType:[
                    {label:'全部',value:'0|0'},
                    {label:'部门1',value:'1|0'},
                    {label:'张三一',value:'2|1'},
                    {label:'张三二',value:'2|2'},
                    {label:'张三三',value:'2|3'},
                    {label:'部门2',value:'1|2'},
                    {label:'李四一',value:'2|4'},
                    {label:'李四二',value:'2|5'},
                    {label:'李四三',value:'2|6'},
                ]
            }
        }
    },
    created(){
        //echarts注册
        // echarts.use(
        //     [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
        // );
        this.search.month=parseTime(new Date(),'{y}-{m}');
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            analyzeApi.getPerformanceQuota({}).then(res=>{
                if(res.data){
                    that.list=res.data.items.map((o,index)=>{
                        o._id=index+1;
                        o.registerpercent=((o.register /o.registertarget)*100).toFixed(1)+'%';
                        o.keeppercent=((o.keep /o.keeptarget)*100).toFixed(1)+'%';
                        o.boutiquepercent=((o.boutique /o.boutiquetarget)*100).toFixed(1)+'%';
                        o.insurancepercent=((o.insurance /o.insurancetarget)*100).toFixed(1)+'%';
                        o.orderpercent=((o.order /o.ordertarget)*100).toFixed(1)+'%';
                        o.loanpercent=((o.loan /o.loantarget)*100).toFixed(1)+'%';
                        return o;
                    });
                    that.initCharts(that.list);
                }
            })
        },
        getClassName(v){
            var idx=v.split('|')[0];
            return ['lv1','lv2','lv3'][idx];
        },
        initCharts(datalist){
            var element=document.getElementById('receptionChart');
            var c=echarts.init(element);
            var dataX=datalist.map(o=>o.guider);
            var dataS=datalist.map(o=>o.percent);
            c.setOption({
                xAxis: {
                    type: 'category',
                    data: dataX,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: dataS,
                    type: 'line'
                }]
            });
            this.$nextTick(()=>{
                c.resize();
            })

        },
        searchClick(){
            this.fetchData();
        }
    }
}
</script>

<style scoped>
    .select-custom{
        display: flex; 
    }
    .select-custom.lv1{
        padding-left:0px;
    }
    .select-custom.lv2{
        padding-left:10px;
    }
    .select-custom.lv3{
        padding-left:20px;
    }
</style>